<template>
    <div :class="classes" :style="{ color: currentColor, ...style }" v-bind="attrs">
        {{ icon }}
        <span :class="textClasses">
            <slot :label="label">{{ label }}</slot>
        </span>
    </div>
</template>

<script setup>
import { computed, useAttrs } from 'vue'

const props = defineProps({
    label: String,
    mode: {
        type: String,
        default: 'text'
    },
    icon: null,
    color: [String, Object],
    round: Boolean,
    size: {
        type: String,
        default: 'small'
    },
    status: {
        type: String,
        default: 'default'
    },
    animation: [Boolean, Array],
    disabled: {
        type: Boolean,
        default: false
    },
    hoverAble: {
        type: Boolean,
        default: true
    },
    style: Object
})

const attrs = useAttrs()

const currentColor = computed(() => {
    return typeof props.color === 'object'
        ? props.color[props.status]
        : props.color
})

const isAnimation = computed(() => {
    if (Array.isArray(props.animation)) {
        return props.animation.includes(props.status)
    }
    return Boolean(props.animation)
})

const classes = computed(() => [
    'bc-feature',
    attrs.class,
    {
        [`bc-feature-mode-${props.mode}`]: !!props.mode,
        [`bc-feature-status-${props.status}`]: typeof props.color !== 'object' && !!props.status,
        'bc-feature-round': (props.mode === 'block' || props.mode === 'tag') && props.round,
        [`bc-feature-size-${props.size}`]: !!props.size,
        'bc-feature-animation': !props.disabled && isAnimation.value,
        'bc-feature-disabled': props.disabled,
        'bc-feature-hover-able': props.hoverAble,
        'bc-feature-click-able': !!attrs.onClick
    }
])

const textClasses = computed(() => ({
    'bc-feature-text': true,
    'bc-feature-space': !!props.icon
}))
</script>


<style lang="less" scoped>
.bc-feature {
    position: relative;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    // margin-right: 8px;
    padding: 2px 8px;
    overflow: hidden;
    transition: 0.1s;
  
    &.status {
      &-default {
        color: #78909c;
      }
      &-success {
        color: #24b588;
      }
      &-warning {
        color: #ff9800;
      }
      &-error {
        color: #f44336;
      }
      &-info {
        color: #03a9f4;
      }
      &-other {
        color: #ab47bc;
      }
    }
  
    &.mode {
      &-badge {
        padding: 4px 8px 4px 24px;
        &::before,
        &::after {
          content: '';
          position: absolute;
          left: 8px;
          width: 8px;
          height: 8px;
          border-radius: 4px;
        }
        &::before {
          border: 1px solid currentColor;
        }
        &::after {
          background-color: currentColor;
        }
        &.animation {
          &::before {
            animation: scale-badge 0.6s linear infinite;
          }
          &::after {
            animation: scale-badge 0.6s linear 0.3s infinite;
          }
        }
      }
      &-tag {
        border-radius: 2px;
        background-color: currentColor;
        border: 1px solid currentColor;
  
        .text,
        svg {
          color: #fff;
        }
      }
      &-block {
        border-radius: 2px;
        border: 1px solid currentColor;
      }
    }
  
    // &.mode {
    //   &-text.animation > .text {
    //     background-image: linear-gradient(
    //       60deg,
    //       rgba(0, 0, 0, 0.2),
    //       currentColor
    //     );
    //     -webkit-text-fill-color: transparent;
    //     background-clip: text;
    //     background-size: 200% 100%;
    //     animation: text-color 2s linear infinite;
    //   }
    // }
  
    &.mode {
      &-tag.animation,
      &-block.animation {
        &::before,
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          transform: translateX(-100%);
          animation: flash 3s ease-in infinite;
        }
      }
      &-tag.animation {
        &::before {
          background: linear-gradient(
            -60deg,
            transparent 80%,
            rgba(255, 255, 255, 0.2) 80%,
            rgba(255, 255, 255, 0.2) 90%,
            transparent 90%
          );
        }
  
        &::after {
          background: linear-gradient(
            -60deg,
            transparent 55%,
            rgba(255, 255, 255, 0.3) 55%,
            rgba(255, 255, 255, 0.3) 75%,
            transparent 75%,
            transparent 80%,
            rgba(255, 255, 255, 0.2) 80%,
            rgba(255, 255, 255, 0.2) 90%,
            transparent 90%
          );
          animation-delay: 0.6s;
        }
      }
      &-block.animation {
        &::before {
          background: linear-gradient(-60deg, transparent 80%, currentColor 80%, currentColor 90%, transparent 90%);
          opacity: 0.2;
        }
  
        &::after {
          background: linear-gradient(
            -60deg,
            transparent 55%,
            currentColor 55%,
            currentColor 75%,
            transparent 75%,
            transparent 80%,
            currentColor 80%,
            currentColor 90%,
            transparent 90%
          );
          opacity: 0.3;
          animation-delay: 0.6s;
        }
      }
    }
  
    &.mode-tag,
    &.mode-block {
      &.round {
        border-radius: 16px;
      }
  
      &.size {
        &-small {
          padding: 3px 6px;
  
          .text {
            font-size: 12px;
            line-height: 12px;
          }
        }
        &-middle {
          padding: 4px 8px;
  
          .text {
            font-size: 14px;
            line-height: 14px;
          }
        }
        &-large {
          padding: 5px 10px;
  
          .text {
            font-size: 16px;
            line-height: 16px;
          }
        }
      }
    }
  
    &.hoverAble:not(.disabled):hover {
      opacity: 0.75;
    }
  
    &.disabled {
      color: #b5b5b5;
      opacity: 0.8;
    }
  
    &.clickAble {
      &:not(.disabled):active {
        transform: scale(0.96);
      }
    }
  
    .text {
      line-height: 16px;
      font-size: 14px;
      font-weight: 600;
      white-space: nowrap;
      z-index: 1;
  
      &.space {
        margin-left: 4px;
      }
    }
  }
  
  @keyframes text-color {
    0% {
      background-position: 100% 0;
    }
    100% {
      background-position: -100% 0;
    }
  }
  
  @keyframes scale-badge {
    from {
      transform: scale(1);
      opacity: 1;
    }
    to {
      transform: scale(3);
      opacity: 0;
    }
  }
  
  @keyframes flash {
    0% {
      transform: translateX(-100%);
    }
    30% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(100%);
    }
  }  
</style>